<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>文字荧光闪烁</title>
    <style>
        .text-effect{
            color: #fff;
            font-family: 'Monoton', cursive;
            font-size: 100px;
            font-weight: 700;
            text-transform: uppercase;/* 表示全部字母都大写 */
            text-align: center;
            /* margin: 0 auto; */
            /* display: block; */
            /* position: relative; */
        }
        /* linear表示动画一直匀速 ；infinite时动画重复的次数为无限次；2000ms时动画完成一次的时间*/
        /* animation:name动画名  keeping-time整个动画持续的时间  animate-function运动方式[ease,ease-in,ease-out,linear,ease-in-out,cublic-bezier] delay动画延迟的时间[ 必须带时间单位s/ms]  times[动画执行的次数，无单位，infinite无限次] iteration动画循环方式[alternate偶数次向前播放，奇数次向后播放；normal每次都向前播放]   final动画的最后达到100%状态时，[backward回到初始态，forwards停在最终态，none,both]; */
        /* 使用时注意加上浏览器前缀：
        -webkit-animation: ;
        -moz-animation: ;
        -o-animation: ;
        animation: ; */
                            /* 动画名称animate 做匀速运动 动画延迟时间2s 循环无限次 */
        .text-effect span{ animation: animate linear 2000ms infinite; }
        /* 以下这段代码是为了实现让文字闪烁跑起来，让每个文字的动画执行的延迟时间不同 */
        /* 1n 2n 3n 4n...表示选中父元素的第1n 2n 3n 4n....个子元素 */
        .text-effect span:nth-child(1n){ animation-delay: 0s; }
        .text-effect span:nth-child(2n){ animation-delay: 100ms; }
        .text-effect span:nth-child(3n){ animation-delay: 200ms; }
        .text-effect span:nth-child(4n){ animation-delay: 300ms; }
        .text-effect span:nth-child(5n){ animation-delay: 400ms; }
        .text-effect span:nth-child(6n){ animation-delay: 500ms; }
        .text-effect span:nth-child(7n){ animation-delay: 600ms; }
        .text-effect span:nth-child(8n){ animation-delay: 700ms; }
        .text-effect span:nth-child(9n){ animation-delay: 800ms; }
        .text-effect span:nth-child(10n){ animation-delay: 900ms; }
        /* .text-effect span:nth-child(odd){ animation-delay: 0ms; }
        .text-effect span:nth-child(even){ animation-delay: 900ms; } */
        /* 定义动画@keyframes */
        @keyframes animate{
            /* @keyframes from{} to{} */
            0%{ opacity: 0.3; }
            100%{
               opacity:1;
               /* text-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影颜色; */
               text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
            }
        }
        @media only screen and (max-width: 990px){
            /* 表示只有当屏幕尺寸小于等于990px时才会运行此代码 */
            /* 如果想要在手机端自适应，加上这句代码：<meta name="viewport" content="width=device-width, initial-scale=1"/> */
            .text-effect{ font-size: 65px; }
        }
        @media only screen and (max-width: 767px){
            .text-effect{ font-size: 50px; }
        }
        @media only screen and (max-width: 479px){
            .text-effect{ font-size: 36px; }
        }
        @media only screen and (max-width: 359px){
            .text-effect{ font-size: 27px; }
        }
        .box{
            background: rgb(89, 89, 185);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="text-effect">
            <span>J</span>
            <span>Q</span>
            <span>u</span>
            <span>e</span>
            <span>r</span>
            <span>y</span>
            <!-- <span>u</span>
            <span>u</span>
            <span>u</span>
            <span>u</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span>
            <span>s</span> -->
          </div>
    </div>

    <script src="../插件组件包/文字荧光闪烁插件/css/bootstrap-grid.min.css"></script>
</body>
</html>